<template>
  <!-- PaymentDetail 缴费信息 -->
  <PageContainer>
    <view class="container">
      <Header title="缴费信息" />
      <view class="info-list">
        <!-- <view class="info-item">
        <text class="item-label">主要业务</text>
        <text class="item-value">{{ fwText }}</text>
      </view> -->
        <view class="info-item">
          <text class="item-label">会费标准</text>
          <text class="item-value">
            {{ info?.levelName }}&nbsp;&nbsp;{{ info?.membershipFees }}元/年
          </text>
        </view>
        <view class="info-item">
          <text class="item-label">会员到期时间</text>
          <text class="item-value">{{ info?.memberEndTime }}</text>
        </view>
      </view>

      <TButtonGroup v-if="info && info?.paymentStatus !== 1">
        <TButton
          class="gutter-btn"
          text="缴费-下载续费函"
          type="primary"
          customClass="br-50"
          @click="download"
        />
      </TButtonGroup>
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  PaymentDetail  缴费信息 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { paymentInfo, Api as mineApi } from '@/api/mine';
  import { computed, ref } from 'vue';
  import type { IPaymentInfoRes } from '@/api/mine/types';
  import dictionary, { type IDictItem } from '@/utils/dictionary';
  import { useEnv } from '@/hooks/core/useEnv';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { isLogin } from '@/utils/is';
  import { onLoad } from '@/router';
  import { useUpload } from '@/hooks/core/useUpload';
  import TButtonGroup from '@/components/TButtonGroup/index.vue';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const info = ref<IPaymentInfoRes>();
  const fwDict = ref<IDictItem[]>([]);

  const fwText = computed(() => {
    const primaryServiceArr = info.value?.primaryService.split(',');
    return primaryServiceArr
      ?.map((id) => {
        return fwDict.value.find((v) => v.dictValue == id)?.dictLabel;
      })
      .filter((f) => f)
      .join(',');
  });

  const { getEnv } = useEnv();
  const { openDocument } = useUpload();
  const download = () => {
    openDocument({
      filePath: getEnv('BASE_URL') + mineApi.paymentExport + `/${info.value?.id}`,
      fileType: 'pdf',
    });
  };

  onLoad<'PaymentDetail'>((op) => {
    isLogin(async () => {
      const dict = await dictionary.get('hydw_kzfw');
      fwDict.value = dict;
      const useUser = useUserStoreWithOut();
      const currentCocId = op.id || useUser.currentCocId;
      currentCocId && paymentInfo(currentCocId).then((r) => (info.value = r));
    });
  });
</script>

<style lang="scss" scoped>
  .info {
    &-list {
      background-color: #fff;
      padding: 0 30rpx;
    }

    &-item {
      min-height: 98rpx;
      font-size: 27rpx;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-top: 1px solid #ddd;

      .item-label {
        width: 200rpx;
      }

      .item-value {
        max-width: calc(100% - 230rpx);
      }

      &:nth-child(1) {
        border-top: none;
      }
    }
  }
</style>
